<template>
  <a-modal
    :visible="visible"
    :centered="true"
    :maskClosable="false"
    :bodyStyle="{ height: '520px' }"
    class="change-userinfo-modal"
    width="976px"
    okText="保存"
    @ok="onOk()"
    @cancel="visible = false"
  >
    <div class="modal-header">
      <a-upload
        name="avatar"
        accept="image/*"
        :customRequest="uploadAvatar"
        :show-upload-list="false"
      >
        <div
          class="profile-picture"
          title="更换头像"
          :style="{ backgroundImage: `url(${avatar})` }"
        ></div>
      </a-upload>
    </div>
    <a-form
      :form="form"
      :hideRequiredMark="true"
      labelAlign="left"
      :labelCol="{
        sm: { span: 6, offset: 1 },
      }"
      :wrapperCol="{
        sm: { span: 12 },
      }"
    >
      <a-row>
        <a-col :span="12">
          <a-form-item label="姓名" :colon="false">
            <a-input
              v-decorator="[
                'humanName',
                {
                  rules: [
                    {
                      required: true,
                      message: '请填写姓名',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="证件号码" :colon="false">
            <a-input
              v-decorator="[
                'identityNum',
                {
                  rules: [
                    {
                      required: true,
                      message: '请填写证件号码',
                    },
                  ],
                },
              ]"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="性别" :colon="false">
            <a-radio-group v-decorator="['gender']">
              <a-radio :value="1"> 男 </a-radio>
              <a-radio :value="2"> 女 </a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="出生日期" :colon="false">
            <a-date-picker v-decorator="['birthday']" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="联系电话" :colon="false">
            <a-input
              v-decorator="[
                'telephone',
                {
                  rules: [
                    {
                      pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
                      message: '请输入正确的手机号码格式',
                    },
                  ],
                  validateTrigger: 'blur',
                },
              ]"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="所属机构" :colon="false">
            <a-input v-decorator="['unitName']" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="执法证号" :colon="false">
            <a-input v-decorator="['lawCardNum']" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script lang='ts' src='./index.ts'></script>
<style lang='scss' scoped>
@import "./_index.scss";
</style>